<template>
	<view>
		<u-code ref="uCode" @change="codeChange"></u-code>
		<view class="Top">
			<image src="/static/logo.png"
				style="width: 160rpx;height: 160rpx;border-radius: 50%;border: 2px solid #F2D7AA;" mode=""></image>
			<view class="Title">
				欢迎注册商城APP
			</view>
		</view>
		<view class="Form">
			<view class="Item">
				<view class="Left">
					+86
				</view>
				<view class="Input">
					<u-input placeholder="请输入手机号" maxlength="11" placeholder-style="color: #999999;font-weight: 400;"
						color="#fff" border="none" v-model="Tel"></u-input>
				</view>
			</view>
			<view class="Item">
				<view class="Left">
					验证码
				</view>
				<view class="Input">
					<u-input placeholder="请输入验证码" placeholder-style="color: #999999;font-weight: 400;" border="none"
						color="#fff" v-model="Code"></u-input>
					<view class="Code" @click="getCode">
						{{tips}}
					</view>
				</view>
			</view>
			<view class="Item">
				<view class="Left">
					密码
				</view>
				<view class="Input">
					<u-input placeholder="请输入密码" type="password" placeholder-style="color: #999999;font-weight: 400;"
						color="#fff" border="none" v-model="Password"></u-input>
				</view>
			</view>
			<view class="Item">
				<view class="Left">
					推荐码
				</view>
				<view class="Input">
					<u-input placeholder="请填入推荐码 (必填)" :disabled="inds"
						placeholder-style="color: #999999;font-weight: 400;" color="#fff" border="none"
						v-model="Invitecode"></u-input>
				</view>
			</view>
		</view>
		<view class="Btn">
			<view class="BtnC" @click="Reg">
				注册
			</view>
		</view>
		<view class="XY">
			<u-checkbox-group>
				<u-checkbox icon-color="#000" shape='circle' @change="Agree" active-color="#F2D7AAFF"></u-checkbox>
			</u-checkbox-group>
			<view class="Tips">
				注册即表示同意<text @click="goAgreement">《用户协议》</text>和<text @click="goPrivacy">《隐私协议》</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tips: '',
				Tel: '',
				Code: '',
				Password: '',
				Invitecode: '',
				Agreement: false,
				inds: false,
				ves: {}
			};
		},
		onLoad(o) {
			this.APP()
			if (uni.getStorageSync('invitecode')) {
				this.Invitecode = uni.getStorageSync('invitecode')
				this.inds = true
			}
		},
		methods: {
			APP() {
				this.$api.APP(res => {
					this.ves = res.data
				})
			},
			// 跳转到用户协议
			goAgreement() {
				let articleId = this.$store.state.config.user_agreement_id;
				this.$common.navigateTo('/pages/article/index?id_type=1&id=' + articleId);
			},
			// 跳转到隐私政策
			goPrivacy() {
				let articleId = this.$store.state.config.privacy_policy_id;
				this.$common.navigateTo('/pages/article/index?id_type=1&id=' + articleId);
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				let yz = /^(13[0-9]|14[5,6,7,8,9]|15[0-3,5-9]|16[2,5,6,7]|17[0,1,3,5,6,7,8]|18[0-9]|19[1,3,5,8,9])\d{8}$/
				if (yz.test(this.Tel)) {
					let that = this
					if (this.$refs.uCode.canGetCode) {
						uni.showLoading({
							title: '正在获取验证码'
						})
						this.$api.sms({
							mobile: that.Tel,
							code: 'login'
						}, res => {
							uni.hideLoading();
							if (res.status) {
								uni.$u.toast('验证码已发送');
								this.$refs.uCode.start();
							} else {
								uni.$u.toast(res.msg);
							}
						})
					} else {
						uni.$u.toast('倒计时结束后再发送');
					}
				} else {
					uni.$u.toast('请输入正确的手机号码')
				}
			},
			Agree() {
				this.Agreement = !this.Agreement
			},
			Reg() {
				let data = {
					mobile: this.Tel,
					type:1,
					code: this.Code,
					password: this.Password,
					invitecode: this.Invitecode
				}
				if (this.Agreement) {
					this.$api.smsLogin(data, res => {
						this.$db.set('team', res.team);
						uni.setStorageSync('userToken', res.data)
						if (res.status) {

							uni.removeStorageSync('invitecode')
							uni.$u.toast('注册成功')
							setTimeout(() => {
								// #ifdef H5
								/* uni.reLaunch({
									url: '/pages/login/login/index1'
								}) */
								window.location.href = `${this.ves.down_url}`;
								// #endif
								// #ifndef H5
								uni.reLaunch({
									url: '/pages/index/index'
								})
								// #endif
							}, 1500)
						} else {
							uni.$u.toast(res.msg)
						}
					})
				} else {
					uni.$u.toast('请先阅读并同意用户协议')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-checkbox__icon-wrap {
		border-color: #F2D7AAFF !important;
	}


	.Top {
		padding-top: 213rpx;
		text-align: center;

		.Title {
			margin-top: 30rpx;
			margin-bottom: 116rpx;
			font-size: 36rpx;
			color: #fff;
		}
	}

	.Form {
		padding: 0 60rpx;

		.Item {
			display: flex;
			align-items: flex-start;
			height: 93rpx;
			border-bottom: 1rpx solid #b9b9b950;
			margin-bottom: 48rpx;

			.Left {
				width: 110rpx;
				font-weight: bold;
				color: #fff;
				margin-right: 30rpx;
			}

			.Input {
				display: flex;
				align-items: flex-start;
				font-weight: bold;
				color: #202126;

				.Code {
					font-size: 24rpx;
					color: #181818FF;
					width: 166rpx;
					height: 60rpx;
					background: linear-gradient(180deg, #F2D7AA 0%, #DEBC86 100%);
					border-radius: 10rpx;
					line-height: 60rpx;
					text-align: center;
					font-weight: 400;
				}
			}
		}
	}

	.Btn {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: calc(202rpx - 48rpx);

		.BtnC {
			width: 629rpx;
			height: 95rpx;
			background: linear-gradient(180deg, #F2D7AA 0%, #DEBC86 100%);
			opacity: 1;
			border-radius: 10rpx;
			font-size: 36rpx;
			font-weight: bold;
			font-size: 36rpx;
			color: #181818FF;
			text-align: center;
			line-height: 95rpx;
		}
	}

	.XY {
		display: flex;
		align-items: center;
		margin-left: 117rpx;
		margin-top: 37rpx;

		.Tips {
			font-size: 24rpx;
			color: #FFFFFFFF;

			text {
				color: #F2D7AAFF;
			}
		}
	}
</style>